<template>
  <div id="full" class="w-full h-full flex flex-col ">
    <order-nav :back="false" @back="$router.push('/wantBuy')">
      <template #right>
        <div class="flex items-center" @click="$router.push({ path: '/chat'})">
          <van-badge class="w-35 h-33 mr-22" :content="unreadMsg">
            <img class="w-full h-full " src="~@/assets/image/c2c/Vector.png" alt="">
          </van-badge>
          <div class="font-28" >{{$t('联系卖家')}}</div>
        </div>
      </template>
    </order-nav>
    <div style="overflow-y: auto" class="flex-1 mainBackground">
      <div class="flex justify-between items-center pt-30 px-32 pb-100 mainBackground">
        <div class="mainBackground">
          <p class="font-48 c2cColor">{{$t('等待卖家确认收款')}}</p>
          <!-- <p class="mt-16 font-24"> {{$t('此卖家95%的订单会在')}}<span style="color: #1D91FF">02</span> {{$t('分钟内完成')}}</p> -->
        </div>
        <div class="w-140 h-144">
          <otc-circle :time="time" :expireTime="expireTime" class="w-full h-full"/>
        </div>
      </div>
      <div class="">
        <trade-data
            title="购买"
            :count="count"
            :total-price="totalPrice"
            :create-order-time="createOrderTime"
            :order-number="orderNumber"
            sell-name="钱多多爱妞商行"
            client-type="买家昵称"
            :detail="detail"
            :trade-method="tradeMethod"
        >
          <template #divider>
            <van-divider class="order-msg-divider"/>
          </template>
          <template #trade-title>
            <span>{{$t('交易方式')}}</span>
          </template>
          <template #terms>
            <van-collapse v-model="activeNames">
              <van-collapse-item name="2">
                <template #title>
                  <span>{{$t('交易条款')}}</span>
                </template>
                <van-divider/>
                <p>{{$t('敢打黑钱者，虽远逼诛！')}}</p>
                <p class="mt-20">{{$t('急单勿拍！')}}</p>
              </van-collapse-item>
            </van-collapse>
          </template>
        </trade-data>
      </div>
    </div>
    <div class="px-40 pt-46 h-172 box-border flex font-30 mainBackground">
      <van-button
          class="flex-1 h-80 mr-16 rounded-2xl c2cColor tabBackground border-none"
          type="primary"
          @click="$router.push({path: '/cancelOrder?order_no=' + $route.query.order_no})"
      >{{$t('取消订单')}}
      </van-button>
      <van-button
          class="flex-1 h-80 rounded-2xl tabBackground c2cColor border-none"
          type="primary"
          @click="$router.push({path: '/appeal'})"
      >{{$t('申诉')}}
      </van-button>
    </div>
    <!--  交易成功  -->
<!--        <trade-success/>-->
    <!--  交易成功详情  -->
<!--        <trade-success-detail/>-->
  </div>
</template>

<script>
import {mapState} from "vuex"
import {Badge, Collapse, CollapseItem, Divider,} from "vant"
import OrderNav from "@/components/order-nav/OrderNav";
import OtcCircle from "@/components/otcCircle";
// import TradeSuccess from "@/page/c2c-trade/components/TradeSuccess";
// import TradeSuccessDetail from "@/page/c2c-trade/components/TradeSuccessDetail";
import TradeData from "@/page/c2cOrder/components/trade-data/TradeData";
import otcApi from '@/API/otc';

export default {
  name: "PaymentDetail",
  data() {
    return {
      activeNames: [],
      // 交易方式
      tradeMethod: [
        {label: this.$t('姓名'), value: this.$t('刘德华')},
        {label: this.$t('银行卡号/账号'), value: this.$t('1122 3344 5566 7788')},
        {label: this.$t('银行名称'), value:  this.$t('中国工商银行')},
        {label: this.$t('开户支行'), value: this.$t('北京海淀支行')},
      ],
      detail: {},
      time: 0,
      expireTime:0,
      timeout: null,
      unreadMsg:0
    }
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'createOrderTime', 'orderNumber'])
  },
  created() {
    this.fetchState()
    // otcApi.ctcOrderGetDetail({order_no: this.$route.query.order_no}).then(res => {
    //   this.detail = res.data
    //   this.time = this.detail.expireTimeRemain
    //   console.log(this.detail)
    // })
  },
  methods: {
    fetchState() {
      const order_no = this.$store.state.c2c.order_no
      otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale }).then(res => {
        const state = res.data.state / 1
        if (state === 1) { // 已付款
          // TOOD: 完成
          this.detail = res.data
          this.time = this.detail.expireTimeRemain
          this.expireTime = this.detail.expireTime*60
          this.unreadMsg = this.detail.unreadMsg
          console.log(this.expireTime)
          if (this.timeout) {
            clearTimeout(this.timeout)
          }
          this.timeout = setTimeout(() => {
            this.fetchState()
          }, 3000)
        } else if (state == 3) { // 已成功
          // TODO 跳转到
          clearTimeout(this.timeout)
          this.$router.push('/tradeSuccessBuyer')
        } else if (state == 5){
          clearTimeout(this.timeout)
          this.$router.push({ path: '/tradeOrderDetail' ,query:{back:false}})
        }else {
          console.log(this.detail)
        }
      })
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
  },
  components: {
    [Badge.name]: Badge,
    [Divider.name]: Divider,
    [Collapse.name]:Collapse,
    [CollapseItem.name]:CollapseItem,
    OrderNav,
    OtcCircle,
    TradeData,
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .order-msg-divider {
    margin: 48px 0;
  }
}


</style>